<div>
    <div class="am-g">
        <div class="am-u-sm-5">
            <select id="select1" multiple class="select" style="width:100%;height:300px;">
            </select>
        </div>
        <div class="am-u-sm-2" style="text-align: center;">
            <div style="margin-bottom:8px;">
                <button type="button" id="moveRightBtn" class="am-btn am-btn-default am-radius"><i class="am-icon-arrow-right"></i></button>
            </div>
            <button type="button" id="moveLeftBtn" class="am-btn am-btn-default am-radius"><i class="am-icon-arrow-left"></i></button>
        </div>
        <div class="am-u-sm-5">
            <select id="select2" multiple class="select" style="width:100%;height:300px;">
            </select>
        </div>
    </div>
    <div style="text-align: right;margin-top: 16px;margin-right: 10px;">
        <button type="button" id="toBindProject-save" class="am-btn am-btn-success am-radius">保存</button>
        <button type="button" id="toBindProject-close" class="am-btn am-btn-default am-radius">关闭</button>
    </div>
</div>
<script type="text/javascript">
$(function() {
    var s1 = [];
    var s2 = [];

    // 初始化数据
    function init() {
        $.ajax({
            url: '/simpleUpgradePackage/getPackageProject?id=<%=id%>',
            dataType: "json",
            async: false,
            type: "get",
            success: function(data) {
                s1 = data.unRelationProjects;
                s2 = data.relationProjects;
            }
        });

        refreshOptions('select1', s1, 'name', 'id');
        refreshOptions('select2', s2, 'name', 'id');
    }

    function moveRight() {
        var select1Obj = document.getElementById("select1");

        for (i = 0; i < select1Obj.length; i++) {
            if (select1Obj.options[i].selected) {
                var val = select1Obj.options[i].value;
                var itemObj = findItem(s1, val);

                s1.splice(itemObj.index, 1);
                s2.push(itemObj.obj);
            }
        }

        refreshOptions('select1', s1, 'name', 'id');
        refreshOptions('select2', s2, 'name', 'id');
    }

    function moveLeft() {
        var select2Obj = document.getElementById("select2");

        for (i = 0; i < select2Obj.length; i++) {
            if (select2Obj.options[i].selected) {
                var val = select2Obj.options[i].value;
                var itemObj = findItem(s2, val);

                s2.splice(itemObj.index, 1);
                s1.push(itemObj.obj);
            }
        }

        refreshOptions('select1', s1, 'name', 'id');
        refreshOptions('select2', s2, 'name', 'id');
    }

    /**
     * 刷新填充下拉框的选项
     */
    function refreshOptions(selectId, items, textPro, valPro) {
        var obj = document.getElementById(selectId);
        obj.options.length = 0;

        for (var i = 0; i < items.length; i++) {
            obj.options.add(new Option(getObjProValue(items[i], textPro), getObjProValue(items[i], valPro)));
        }
    }

    /**
     * 根据属性名称获取对象对应的值
     * @param obj 对象
     * @param pros 属性
     * @returns {string}
     */
    function getObjProValue(obj, pros) {
        var prosArr = pros.split("-");

        var val = "";
        for (var i = 0; i < prosArr.length; i++) {
            for (var name in obj) {
                if (prosArr[i] == name) val += obj[name] + "-";
            }
        }
        return val.substring(0, val.length - 1);
    }

    function findItem(arrs, val) {
        for (var i = 0; i < arrs.length; i++) {
            if (arrs[i].id === val) {
                return {
                    index: i,
                    obj: arrs[i]
                };
            }
        }
    }

    init();

    $('#select1').dblclick(function() {
        moveRight();
    });
    $('#select2').dblclick(function() {
        moveLeft();
    });
    $('#moveRightBtn').click(function() {
        moveRight();
    });
    $('#moveLeftBtn').click(function() {
        moveLeft();
    });

    //--------------------------------------------------------
    $('#toBindProject-close').click(function() {
        zeroModal.closeAll();
    });
    $('#toBindProject-save').click(function() {
        $.ajax({
            url: '/simpleUpgradePackage/doBindProject',
            dataType: "json",
            type: "post",
            data: {
                projectsJson: JSON.stringify(s2),
                id: '<%=id%>'
            },
            success: function(data) {
                zeroModal.closeAll();
                if (data.success) {
                    $.toast({ text: '绑定项目成功！', showHideTransition: 'slide', icon: 'success', position: 'top-center' });
                } else {
                    $.toast({ text: '绑定项目失败！', showHideTransition: 'slide', icon: 'error', position: 'top-center' });
                }
            }
        });
    });
});
</script>